<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选座页</title>
		<link rel="stylesheet" href="./8.css">
	</head>
	<body bgcolor="#f5f6f8">
		<div class="nav">
			<div class="nav1">
				<div class="exm"></div>
				<span><p>可选</p></span>
			</div>
			<div class="nav1">
				<div class="exm1">
					<img src="./gouxuan.png" alt="">
				</div>
				<span><p>已售</p></span>
			</div>
			<div class="nav1">
				<div class="exm2"></div>
				<span><p>最佳观影区</p></span>
			</div>
		</div>
		<div class="header">
			<img src="./screen.png" alt="">
			<p>1号激光杜比全景银幕</p>
		</div>
		<div class="main">
			<ul class="num">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
			</ul>
			<div class="sets">
				<div class="sets1">
					<ul>
						<li>
							<input type="checkbox" name="" id="1-18">
						</li>
						<li>
							<input type="checkbox" name="" id="2-18">
						</li>
						<li>
							<input type="checkbox" name="" id="3-18">
						</li>
						<li>
							<input type="checkbox" name="" id="4-18">
						</li>
						<li>
							<input type="checkbox" name="" id="5-18">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="kong">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
						<li>
							<input type="checkbox" name="" id="">
						</li>
					</ul>
					<ul>
						<li>
							<input type="checkbox" name="set" id="kong">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<div id="c"></div>
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
						<li>
							<input type="checkbox" name="set" id="">
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="tao"><img src="./taopiaopiao.png" alt=""></div>
		<div class="form">
			<div class="xuan">
				<h3 style="margin-left: 20px;">金手指</h3>
				<div class="change" id="change">
					切换场次
				</div>
				<p><span style="color: red; margin-left: 20px;">今天 </span>12月30日 16:00-18:05 国语 2D</p><br>
				<ul class="radio-style">
					<li style="background-color: white; margin-left: 20px;"><span
							style="background-color: white; ">推荐座位</span></li>
					<li>
						 <input type="radio" name='season' id='one' >
						 <label for="one">1人 <span class='glyphicon glyphicon-ok'></span>    </label>
						
					</li>
					<li><input type="radio" name='season' id='2' >
						 <label for="2">2人 <span class='glyphicon glyphicon-ok'></span>    </label></li>
					<li><input type="radio" name='season' id='3' >
						 <label for="3">3人 <span class='glyphicon glyphicon-ok'></span>    </label></li>
					<li><input type="radio" name='season' id='4' >
						 <label for="4">4人 <span class='glyphicon glyphicon-ok'></span>    </label></li>
					<li><input type="radio" name='season' id='5' >
						 <label for="5">5人 <span class='glyphicon glyphicon-ok'></span>    </label></li>
					<li><input type="radio" name='season' id='6' >
						 <label for="6">6人 <span class='glyphicon glyphicon-ok'></span>    </label></li>
				</ul>
			</div>
		</div>
		<div class="form1">
		  <a href="../9lmy/querentijiao.html" id="totalPriceButton">请先选座</a>
		</div>
	</body>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
<<<<<<< HEAD:18xhy/8.html
		    const seats = document.querySelectorAll('.sets input[type="checkbox"]');
		    const totalPriceButton = document.getElementById('totalPriceButton');
		    const seatRecommendationList = document.querySelector('.radio-style'); // 确保这是您要替换的推荐座位列表的类名
		    const maxSeats = 6; // 最多可选座位数
=======
		    let seats = document.querySelectorAll('.sets input[type="checkbox"]');
		    let totalPriceButton = document.getElementById('totalPriceButton');
		    let seatRecommendationList = document.querySelector('.radio-style'); // 确保这是您要替换的推荐座位列表的类名
		    let maxSeats = 6; // 最多可选座位数
>>>>>>> 59fbcac3d75e0c6bb6f3c7e5080d47ee7e42e8e3:谢华洋-F21600125/8.html
		
		    seats.forEach(seat => {
		        seat.addEventListener('change', function() {
		            if (this.checked && document.querySelectorAll('.sets input[type="checkbox"]:checked').length > maxSeats) {
		                alert('最多只能选择六个座位！');
		                this.checked = false; // 取消当前的选择
		                return; // 早期退出函数
		            }
		            updateSeatSelection();
		            updateTotalPrice();
		        });
		    });
		
		    function updateSeatSelection() {
<<<<<<< HEAD:18xhy/8.html
		        const selectedSeats = document.querySelectorAll('.sets input[type="checkbox"]:checked');
=======
		        let selectedSeats = document.querySelectorAll('.sets input[type="checkbox"]:checked');
>>>>>>> 59fbcac3d75e0c6bb6f3c7e5080d47ee7e42e8e3:谢华洋-F21600125/8.html
		        let seatDetails = '';
		
		        selectedSeats.forEach(seat => {
		            seatDetails += `<li>座位号: ${seat.id} - 单价: ¥40.9</li>`;
		        });
		
		        if (selectedSeats.length > 0) {
		            seatRecommendationList.innerHTML = seatDetails;
		        } else {
		            seatRecommendationList.innerHTML = '<li style="background-color: white; margin-left: 20px;"><span style="background-color: white;">推荐座位</span></li>';
		        }
		    }
		
		    function updateTotalPrice() {
<<<<<<< HEAD:18xhy/8.html
		        const selectedSeats = document.querySelectorAll('.sets input[type="checkbox"]:checked');
=======
		        let selectedSeats = document.querySelectorAll('.sets input[type="checkbox"]:checked');
>>>>>>> 59fbcac3d75e0c6bb6f3c7e5080d47ee7e42e8e3:谢华洋-F21600125/8.html
		        let totalPrice = 0;
		        selectedSeats.forEach(() => {
		            totalPrice += 40.9;
		        });
		        totalPriceButton.innerHTML = `总价: ¥${totalPrice.toFixed(2)} 确认选座`;
		    }
		});

	</script>
</html>